.btn {
      position: relative;
      display: inline-block;
      font-weight: $btn-font-weight;
      line-height: $btn-line-height;
      color: $body-color;
      white-space: nowrap; // 不换行
      text-align: center;
      vertical-align: middle;
      background-image: none;
      border: $btn-border-width solid transparent;
      @include button-size( $btn-padding-y,  $btn-padding-x,  $btn-font-size,  $border-radius);
      box-shadow: $btn-box-shadow;
      cursor: pointer ;
      transition: $btn-transition;
      &.disabled,
      &[disabled] {
            cursor: not-allowed;
            opacity: $btn-disabled-opacity;
            box-shadow: none;
            > * {
                  pointer-events: none;   // 不接受鼠标事件
            }
      }
}

.btn-lg {
      @include button-size(
            $btn-padding-y-lg, 
            $btn-padding-x-lg, 
            $btn-font-size-lg, 
            $btn-border-radius-lg
      );
}
.btn-sm {
      @include button-size(
            $btn-padding-y-sm, 
            $btn-padding-x-sm, 
            $btn-font-size-sm, 
            $btn-border-radius-sm
      );
}

.btn-primary {
      @include button-style ($primary, $primary, $white);
}
.btn-danger {
      @include button-style ($danger, $danger, $white);
}
.btn-default {
      @include button-style($white, $gray-400, $border-color,  $white, $primary, $primary )
}
.btn-link {
      font-weight: $font-weight-normal;
      color: $btn-link-color;
      text-decoration: $link-decoration;
      box-shadow: none;
      &:hover, &.hover {
            color: $btn-link-hover-color;
            text-decoration: $link-hover-decoration;
      };
      &:focus, &.focus { 
            text-decoration: $link-hover-decoration;
            box-shadow: none;
      };
      &:disabled, &.disabled {
            text-decoration: $btn-link-disabled-color;
            pointer-events: none;
      }
}